import React, { useState, useEffect } from 'react'
import { Button, Modal, message, List, Tag, Pagination } from 'antd';
// import { get } from '../../util/get'
// import { post } from "../../util/post"
import style from './index.module.css'
export default function EditOrderAddressModal(props) {
    const { v, setV,changeUse} = props
    const token = localStorage.getItem('TOKEN')
    const [list, setList] = useState([])
    // const [total, setTotal] = useState(0)
    // const [page, setPage] = useState(1)
    useEffect(() => {
        if (v) {
            setList(props.data)
        }
    }, [ token, v])

    const handleOk = () => {
        setV(false);
    };

    const handleCancel = () => {
        setV(false);
    };
    const changeUsing = async (id) => {
        const l = list.map(i => {
            if (i.id === id) {
                i.cdefault = true;
                changeUse(i);
            }
            else i.cdefault=false;
            return i;
        })
        setList(l)
    }
    return (
        <Modal title="修改使用地址"
            visible={v}
            onOk={handleOk}
            onCancel={handleCancel}
            className={style.modal}
            footer={null}>
            <List
                className={style.list}
                itemLayout="horizontal"
                bordered
                dataSource={list}
                renderItem={(item) => {
                    const { name, phone, address, id, cdefault } = item
                    return (
                        <List.Item key={id}
                        >
                            <List.Item.Meta
                                title={<><span>{name}</span><span>{phone}</span></>}
                                description={address}
                            />
                            <div className={style.tag}>{cdefault ? <Tag color="#62e928">使用中</Tag> : <Tag onClick={() => { changeUsing(id) }}>未使用</Tag>}</div>
                        </List.Item>
                    )
                }}
            />
            {/* <Pagination
                size="small"
                className={style.pagination}
                current={page} defaultPageSize={10}
                total={total} onChange={page => {
                    setPage(page);
                }} /> */}
        </Modal>
    )
}
